<template>
	<view class="container">
	  <!-- 用户信息卡片 -->
	  <view class="profile-card">
	    <view class="profile">
	      <image class="avatar" src="/imgs/111.png" mode="aspectFill" />
	      <view class="user-info">
	        <text class="username">{{ coach.name }}</text>
	        <!-- <text class="user-id">ID: 88888888</text> -->
	      </view>
	    </view>
	  </view>
	
	  <!-- 菜单列表 -->
	  <view class="menu">
	    <view class="menu-item" bindtap="goBalance">
	      <view class="menu-item-left">
	        <text class="menu-text">账户余额</text>
	      </view>
	      <view class="menu-item-right">
	        <text class="balance">¥0.00</text>
	        <text class="arrow">›</text>
	      </view>
	    </view>
	
	    <view class="menu-item" @click="passwordShow = true">
	      <view class="menu-item-left">
	        <text class="menu-text">修改密码</text>
	      </view>
	      <view class="menu-item-right">
	        <text class="arrow">›</text>
	      </view>
	    </view>
	
	    <view class="menu-item" bindtap="goMessages">
	      <view class="menu-item-left">
	        <text class="menu-text">消息</text>
	      </view>
	      <view class="menu-item-right">
	        <text class="badge">3</text>
	        <text class="arrow">›</text>
	      </view>
	    </view>
	
	    <view class="menu-item" bindtap="goSettings">
	      <view class="menu-item-left">
	        <text class="menu-text">设置</text>
	      </view>
	      <view class="menu-item-right">
	        <text class="arrow">›</text>
	      </view>
	    </view>
		
		<view class="menu-item" @click="exitLogin">
		  <view class="menu-item-left">
		    <text class="menu-text">退出登录</text>
		  </view>
		  <view class="menu-item-right">
		    <text class="arrow">›</text>
		  </view>
		</view>
	  </view>
	
	  <!-- 底部导航 -->
	  <view class="bottom-nav">
	    <view class="nav-item" @click="Index">
	      <image class="nav-icon" src="/imgs/首页.png"></image>
	      <text class="nav-text">首页</text>
	    </view>
	    <view class="nav-item">
	      <image class="nav-icon" src="/imgs/我的.png"></image>
	      <text class="nav-text">我的</text>
	    </view>
	  </view>

 <!-- 修改密码弹窗 -->
    <u-popup v-model:show="passwordShow" mode="center" border-radius="16" closeable>
      <view class="popup-wrapper">
        <view class="popup-title">修改密码</view>

        <u--form labelWidth="80" :model="form" ref="form">
          <!-- 原密码 -->
          <u--input
            v-model="passwordForm.oldPassword"
			clearable="true"
			type="password"
            placeholder="请输入原密码"
            :border="false"
            style="margin: 20rpx 0;"
          >
          </u--input>
          <!-- 新密码 -->
          <u--input
            v-model="passwordForm.newPassword"
            placeholder="请输入新密码"
			clearable="true"
			type="password"
            :border="false"
            style="margin: 20rpx 0;"
          >
          </u--input>
        </u--form>

        <!-- 提交按钮 -->
        <u-button
          type="warning"
          text="提交"
          @click="handlePassword"
          :loading="loading"
          style="margin-top: 40rpx; border-radius: 100rpx;"
        ></u-button>
      </view>
    </u-popup>

	  
	</view>
	

</template>

<script setup>
import {ref,onMounted} from 'vue'
import { getCoachName,updatePassword } from '@/api/my.js'
import { showLoading } from '@/utils/showLoading.js'

const coach = ref({})
const passwordShow = ref(false)
const passwordForm = ref({
	oldPassword: '',
	newPassword: ''
})


onMounted(() => {
	showLoading()
	getCoachName().then(res => {
		coach.value = res.data
		uni.hideLoading()
	})
})
	
const Index = () => {
	uni.navigateTo({
		url: "/pages/index/index"
	})
}
//修改密码
const handlePassword = () => {
	updatePassword(passwordForm.value).then(res => {
		uni.showToast({
			title: "修改成功",
			icon:'success'
		})
		passwordShow.value = false
		passwordForm.value = {
			oldPassword: '',
			newPassword: ''
		}
		console.log("接收到的数据：",res)
	})
}

//退出登录
const exitLogin = () =>{
	uni.showModal({
		title: "退出登录",
		content: "是否退出登录",
		})
		.then(res => {
			if(res.confirm){
				uni.removeStorageSync("coach")
				uni.removeStorageSync("coachId")
				uni.reLaunch({
					url: "/pages/login/index"
				})
			}
		})
}

</script>

<style>
	/* 变量保持一致 */
	page{
	  background-color: #f5f7fa;
	}
	
	/* 整个 */
	.container{
	  width: 100%;
	  padding: 32rpx;
	  padding-bottom: 80rpx;
	  box-sizing: border-box;
	}
	
	/* 头部 */
	.profile-card{
	  background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
	  border-radius: 40rpx;
	  padding: 20rpx;
	  margin-bottom: 20rpx;
	  color: #fff;
	  box-shadow: 0 20rpx 60rpx rgba(255,126,95,.25);
	  position: relative;
	  overflow: hidden;
	}
	/* 斜的光影 */
	.profile-card::before{
	  content: "";
	  position: absolute;
	  top: -50%;
	  right: -50%;
	  width: 100%;
	  height: 100%;
	  background: rgba(255,255,255,.15);
	  transform: rotate(25deg);
	  z-index: 1;
	}
	
	.profile{
	  display: flex;
	  align-items: center;
	  position: relative;
	  z-index: 2;
	}
	/* 图片区域 */
	.avatar{
	  width: 100rpx;
	  height: 100rpx;
	  border-radius: 50%;
	  margin-right: 36rpx;
	  background: #fff;
	}
	
	.user-info{
	  flex: 1;
	}
	
	.username{
	  font-size: 37rpx;
	  font-weight: 600;
	  margin-bottom: 12rpx;
	  display: block;
	  text-shadow: 0 4rpx 8rpx rgba(0,0,0,.1);
	}
	
	/* 四行 */
	.menu{
	  background: #fff;
	  border-radius: 40rpx;
	  overflow: hidden;
	  box-shadow: 0 10rpx 30rpx rgba(0,0,0,.06);
	  margin-bottom: 20rpx;
	}
	/* 其中一行 */
	.menu-item{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 32rpx 40rpx;
	  border-bottom: 2rpx solid #f0f2f5;
	  transition: all .3s;
	}
	.menu-item:last-child{
	  border-bottom: none;
	}
	.menu-item:active{
	  background: #f3f4f6;
	}
	/* 左边的 */
	.menu-item-left{
	  display: flex;
	  align-items: center;
	}
	/* 文字 */
	.menu-text{
	  font-size: 34rpx;
	  color: #1f2d3d;
	  font-weight: 500;
	}
	/* 右边的 */
	.menu-item-right{
	  display: flex;
	  align-items: center;
	}
	
	.balance{
	  color: #ff7e5f;
	  font-weight: 600;
	  margin-right: 24rpx;
	  font-size: 30rpx;
	}
	
	.badge{
	  background: #ff7e5f;
	  color: #fff;
	  font-size: 24rpx;
	  border-radius: 24rpx;
	  padding: 4rpx 16rpx;
	  margin-right: 20rpx;
	  font-weight: 500;
	}
	
	.arrow{
	  color: #c0c6cf;
	  font-size: 40rpx;
	  font-weight: bold;
	}
	
	.bottom-nav {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  display: flex;
	  background: #fff;
	  border-top: 2rpx solid #eee;
	  padding: 10rpx 0;
	}
	
	.nav-item {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  color: #888;
	  font-size: 24rpx;
	}
	
	.nav-item.active {
	  color: #ff9a9e;
	}
	
	.nav-icon {
	  width: 34rpx;
	  height: 34rpx;
	  margin-bottom: 6rpx;
	}
	.nav-text{
	  font-size: 22rpx;
	}
	
	.popup-wrapper {
	  width: 600rpx;
	  padding: 60rpx 40rpx;
	  background-color: #fff;
	  border-radius: 16rpx;
	  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
	}
	
	.popup-title {
	  font-size: 36rpx;
	  font-weight: bold;
	  color: #333;
	  text-align: center;
	  margin-bottom: 40rpx;
	}
	
	.u--input {
	  background-color: #f5f6f7;
	  padding: 16rpx 24rpx;
	  border-radius: 12rpx;
	  font-size: 28rpx;
	}

</style>